<template>
    <a-drawer
      placement="right"
      :visible="visible"
      :mask="false"
      :maskClosable="false"
      :closable="false"
      :width="70"
    >
        <div class="notice_drawer_container">
            <div class="notice_drawer_notices">
                <a-tooltip placement="left" v-for="item in noticeList" :key="item.key">
                    <template slot="title">
                        <span>{{item.title}}</span>
                    </template>
                    <a-badge :count="getCount(item.noticeType)">
                        <div class="notice iconfont" :class="item.class" @click="() => handleNoticeClick(item)"></div>
                    </a-badge>
                </a-tooltip>
            </div>
            <a-button type="primary" class="notice_drawer_close" @click="onClose">
                关闭
            </a-button>
        </div>

        <notice-modal 
            :noticeType="noticeData.noticeType" 
            v-if="noticeData.visible"
            @close="noticeData.visible = false"
        ></notice-modal>
    </a-drawer>
</template>

<script>
import { getNoticeCount, clearNotice } from "@/api/app"
import noticeModal from "../modal/notice/noticeModal.vue"
export default {
    components:{
        noticeModal
    },
    data(){
        return {
            noticeCount: [
                {
                    notice_total: 0,
                    notice_type: 0,
                },
                {
                    notice_total: 0,
                    notice_type: 1,
                },
                {
                    notice_total: 0,
                    notice_type: 2,
                },
            ],
            noticeList: [
                {
                    title: '系统',
                    class: 'system cgsIcon-bell',
                    key: 'system',
                    noticeType: 0,
                },
                {
                    title: '工作流',
                    class: 'workflow cgsIcon-workflow',
                    key: 'workflow',
                    noticeType: 1,
                },
                {
                    title: '应用',
                    class: 'app cgsIcon-appyingyong',
                    key: 'app',
                    noticeType: 2,
                },
            ],
            noticeData:{
                visible: false,
                noticeType: 0,
            }
        }
    },
    props:{
        visible: Boolean
    },
    methods:{
        async handleNoticeClick(item){
            this.noticeData.visible = false
            await clearNotice(item.noticeType)
            this.noticeData = {
                noticeType: item.noticeType,
                visible: true
            }
            let noticeCount = await getNoticeCount()
            this.noticeCount = noticeCount
        },
        onClose(){
            this.noticeData.visible = false
            this.$emit('close')
        },
        getCount(type){
            let count = 0
            let notice = this.noticeCount.find(n => n.notice_type === type)
            if(notice){
                count = notice.notice_total
            }
            return count
        }
    },
    watch:{
        
    },
    async mounted(){
        let noticeCount = await getNoticeCount()
        this.noticeCount = noticeCount

        this.$ws.on('send_notice', async (data) => {
            let noticeCount = await getNoticeCount()
            this.noticeCount = noticeCount
        })
    }
}
</script>

<style lang="less">

.app{
    background-color: rgb(255, 174, 0);
}
.system{
    background-color: rgb(173, 173, 173);
}
.workflow{
    background-color: rgb(0, 145, 255);
}

.notice_drawer_container{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    left: 10px;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    
    .notice_drawer_notices{
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 10px;

        .ant-badge{
            margin-top: 10px;
        }
        .notice{
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            font-size: 20px;
        }

    }
    .notice_drawer_close{
        margin-bottom: 20px;
        padding: 0;
    }
}
</style>